<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>果汁外卖</title>
    <style>
        /* 全局背景样式 */
        body {
            background: linear-gradient(120deg, #f0f0e5 10%, #28abec 100%);
            margin: 0;
            padding: 0;
            font-family: Arial, sans-serif;
        }

        /* 导航栏样式 */
        nav {
            background-color: rgba(0, 0, 0, 0.5);
            padding: 1px 0;
        }

        nav ul {
            list-style-type: none;
            padding: 0;
            text-align: center;
        }

        nav ul li {
            display: inline-block;
            margin-right: 20px;
        }

        nav ul li a {
            text-decoration: none;
            color: #fff;
            padding: 10px 20px;
            border-radius: 5px;
            transition: all 0.3s ease;
        }

        nav ul li a:hover {
            background-color: #ffa500;
        }

        /* 其他样式 */
        header {
            background-color: rgba(238, 240, 148, 0.5);
            padding: 10px;
            text-align: center;
            color: #000000;
        }

        /* 使用网格布局样式化产品列表 */
        .productContainer {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
            gap: 20px;
        }

        .product {
            width: 40%;
            text-align: center;
            border-radius: 50px;
            border: 6px solid #ddd;
            padding: 20px;
            background-color: #f3f2b8;
            box-shadow: 0 0px 12px rgba(0, 0, 0, 0.1);
            transition: transform 0.2s ease;
            width: 100%; /* 图片宽度填满父容器 */
            height: auto; /* 高度自适应，防止拉伸 */
            border-radius: 50%; /* 将图片边框半径设置为50%，实现圆形效果 */
        }

        .product:hover {
            transform: translateY(-5px);
        }

        .product img {
            width: 150px;
            height: 150px;
            border-radius: 50%;
            margin-bottom: 10px;
        }

        /* 订单项样式 */
        .orderItem {
            margin-bottom: 20px;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
            background-color: #f8f8f8;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease;
        }

        .orderItem:hover {
            transform: translateY(-5px);
        }

        /* 优化按钮样式 */
        button {
            background-color: #ffa500;
            color: #fff;
            border: none;
            border-radius: 5px;
            padding: 8px 16px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        button:hover {
            background-color: #ff4500;
        }

        /* 弹窗样式 */
        #popup {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: #fff;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
        }

        /* 滚动跑马灯动画 */
        @keyframes marquee {
            0% { transform: translateX(100%); }
            80% { transform: translateX(-100%); }
        }

        /* 滚动跑马灯效果 */
        .marquee {
            display: inline-block;
            white-space: nowrap;
            animation: marquee 10s linear infinite;
            color: #ff0000; /* 设置文字颜色为红色 */
        }
/* 水果介绍板块样式 */
        .fruitIntroduction {
            display: flex;
            justify-content: space-around;
            align-items: center;
            margin-top: 50px;
        }

        .fruitIntroductionItem {
            width: 20%;
            text-align: center;
            padding: 20px;
            border-radius: 90px; /* 设置边框弧度 */
            background-color: #f3f2b8;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            transition: transform 0.2s ease;
            overflow: hidden; /* 隐藏溢出的部分 */
        }

        .fruitIntroductionItem:hover {
            transform: translateY(-5px);
        }

        .fruitIntroductionItem img {
            width: 60%; /* 图片宽度填满父容器 */
            height: auto; /* 高度自适应，防止拉伸 */
            border-radius: 80%; /* 将图片边框半径设置为50%，实现圆形效果 */
        }
          /* 定义抖动动画 */
        @keyframes shake {
            0% { transform: rotate(-3deg); }
            25% { transform: rotate(3deg); }
            50% { transform: rotate(-3deg); }
            75% { transform: rotate(3deg); }
            100% { transform: rotate(-3deg); }
        }

        /* 应用动画到 <p> 标签 */
        .dou {
            animation: shake 0.5s ease infinite; /* 持续时间为0.5秒，无限循环 */
            color: red;
        }



    </style>
</head>
<body>
    <header>
        <h1>果汁外卖</h1>
        
        <p class="marquee">我们提供各种口味的新鲜果汁，满足您的口渴。</p>
        

    </header>
    <nav>
        <ul>
            <li><a href="#" onclick="showHomePage()">首页</a></li>
            <li><a href="#" onclick="showProductListPage()">产品列表</a></li>
            <li><a href="#" onclick="showOrderDetailsPage()">购物车</a></li> <!-- 添加订单详情页面链接 -->
            <li><a href="#" onclick="showContactUsPage()">联系我们</a></li>
        </ul>
    </nav>
    <main id="mainContent">
        <!-- 默认显示首页内容 -->
        <div id="homePage">
            <h2><center>欢迎光临&nbsp;&copy;&nbsp;果汁铺子</center></h2>
            <center><p class="dou">可配送到机房</p></center>
            <!-- 水果介绍板块 -->
            <div class="fruitIntroduction">
                <div class="fruitIntroductionItem" onclick="showProductListPage()">
                    <img src="orange_juice.jpg" alt="橙汁">
                    <h3>橙汁</h3>
                    <p>新鲜的橙子，制成的橙汁。</p>
                    <p>水果产地：武汉</p>
                    <p class="dou">限时特价：5元/瓶</p>
                    
                </div>
                <div class="fruitIntroductionItem" onclick="showProductListPage()">
                    <img src="apple_juice.jpg" alt="苹果汁">
                    <h3>苹果汁</h3>
                    <p>卖不出的苹果，榨的苹果汁。</p>
                    <p>水果产地：湖南</p>
                    <p class="dou">限时特价：5元/瓶</p>
                    
                </div>
                <div class="fruitIntroductionItem" onclick="showProductListPage()">
                    <img src="lemon_juice.jpg" alt="柠檬汁">
                    <h3>柠檬汁</h3>
                    <p>清新的柠檬，制成的柠檬汁。</p>
                    <p>水果产地：海南</p>
                    <p class="dou">限时特价：5元/瓶</p>
                </div>
                <div class="fruitIntroductionItem" onclick="showProductListPage()">
                    <img src="durian_juice.jpg" alt="榴莲汁">
                    <h3>榴莲汁</h3>
                    <p>又臭又香的榴莲，制成的榴莲汁。</p>
                    <p>水果产地：江西</p>
                    <p class="dou">限时特价：5元/瓶</p>
                </div>
           
            </div>
        </div>
        <div id="productListPage" style="display:none;">
            <!-- 产品列表内容 -->
            <h2>产品列表</h2>
            <div class="productContainer">
                <div class="product">
                    <img src="orange_juice.jpg" alt="橙汁">
                    <h3>橙汁</h3>
                    <p>价格：$3.99</p>
                    <div>
                        <button onclick="decrementQuantity('orange')">-</button>
                        <input type="number" id="orangeQuantity" value="1" min="1">
                        <button onclick="incrementQuantity('orange')">+</button>
                    </div>
                    <button onclick="addToCart('orange')">加入购物车</button>
                </div>
                <div class="product">
                    <img src="apple_juice.jpg" alt="苹果汁">
                    <h3>苹果汁</h3>
                    <p>价格：$4.49</p>
                    <div>
                        <button onclick="decrementQuantity('apple')">-</button>
                        <input type="number" id="appleQuantity" value="1" min="1">
                        <button onclick="incrementQuantity('apple')">+</button>
                    </div>
                    <button onclick="addToCart('apple')">加入购物车</button>
                </div>
                <div class="product">
                    <img src="lemon_juice.jpg" alt="柠檬汁">
                    <h3>柠檬汁</h3>
                    <p>价格：$3.79</p>
                    <div>
                        <button onclick="decrementQuantity('lemon')">-</button>
                        <input type="number" id="lemonQuantity" value="1" min="1">
                        <button onclick="incrementQuantity('lemon')">+</button>
                    </div>
                    <button onclick="addToCart('lemon')">加入购物车</button>
                </div>
                <div class="product">
                    <img src="durian_juice.jpg" alt="榴莲汁">
                    <h3>榴莲汁</h3>
                    <p>价格：$5.99</p>
                    <div>
                        <button onclick="decrementQuantity('durian')">-</button>
                        <input type="number" id="durianQuantity" value="1" min="1">
                        <button onclick="incrementQuantity('durian')">+</button>
                    </div>
                    <button onclick="addToCart('durian')">加入购物车</button>
                </div>
                <!-- 在这里添加更多产品 -->
            </div>
        </div>
        <div id="orderDetailsPage" style="display:none;">
            <!-- 订单详情内容 -->
            <h2>购物车</h2>
            <div id="orderItems"></div>
        </div>
        <div id="contactUsPage" style="display:none;">
         <center>
            <h2>联系我们</h2>
            <p>gitee代码仓库：<a href="点击访问">点击访问</a></a></p>
            <p>TEL ：15387206261</p>
            <p>邮箱：tian002@qq.com</p>
            <p>地址：5号楼机房</p><br><br><br><br><br><br>
                   <center><p class="dou">版权 &copy; 2206_田泉</p></center>
                    </center>
        </div>
    </main>
    
    
        
 
    
    <!-- 弹窗元素 -->
    <div id="popup">
        <p id="popupText"></p>
    </div>

    <script>
        function showHomePage() {
            document.getElementById('homePage').style.display = 'block';
            document.getElementById('productListPage').style.display = 'none';
            document.getElementById('orderDetailsPage').style.display = 'none'; // 隐藏订单详情页面
            document.getElementById('contactUsPage').style.display = 'none';
        }

        function showProductListPage() {
            document.getElementById('homePage').style.display = 'none';
            document.getElementById('productListPage').style.display = 'block';
            document.getElementById('orderDetailsPage').style.display = 'none'; // 隐藏订单详情页面
            document.getElementById('contactUsPage').style.display = 'none';
        }

        function showOrderDetailsPage() {
            document.getElementById('homePage').style.display = 'none';
            document.getElementById('productListPage').style.display = 'none';
            document.getElementById('orderDetailsPage').style.display = 'block'; // 显示订单详情页面
            document.getElementById('contactUsPage').style.display = 'none';
            updateOrderDetails(); // 更新订单详情页面内容
        }

        function showContactUsPage() {
            document.getElementById('homePage').style.display = 'none';
            document.getElementById('productListPage').style.display = 'none';
            document.getElementById('orderDetailsPage').style.display = 'none';
            document.getElementById('contactUsPage').style.display = 'block';
        }

        var orderItems = []; // 用于存储订单商品信息

        function incrementQuantity(productName) {
            var quantityInput = document.getElementById(productName + 'Quantity');
            quantityInput.value++;
        }

        function decrementQuantity(productName) {
            var quantityInput = document.getElementById(productName + 'Quantity');
            if (quantityInput.value > 1) {
                quantityInput.value--;
            }
        }

        function addToCart(productName) {
            var quantityInput = document.getElementById(productName + 'Quantity');
            var quantity = parseInt(quantityInput.value);
            var orderItem = {
                productName: productName,
                quantity: quantity,
                timestamp: new Date().toLocaleString() // 添加操作时间
            };
            orderItems.push(orderItem); // 将订单商品信息添加到数组中
            updateOrderDetails(); // 更新订单详情页面显示
            showPopup('已加入购物车！请查看！'); // 显示弹窗
        }

        function updateOrderDetails() {
            var orderItemsContainer = document.getElementById('orderItems');
            orderItemsContainer.innerHTML = ''; // 清空订单详情内容

            if (orderItems.length === 0) {
       
                orderItemsContainer.innerHTML = '<center><P>暂无订单！</P><p><a href="index.html">点击网站产品列表下单</a></p></center>';
            } else {
                orderItems.forEach(function (item, index) {
                    var orderItemElement = document.createElement('div');
                    orderItemElement.classList.add('orderItem');
                    orderItemElement.innerHTML = '<p>商品名称：' + item.productName + '</p>' +
                        '<p>数量：' + item.quantity + '</p>' +
                        '<p>操作时间：' + item.timestamp + '</p>' +
                        '<button onclick="deleteOrderItem(' + index + ')">删除</button>' +
                        '<button onclick="printOrderItem(' + index + ')">打印</button>';
                    orderItemsContainer.appendChild(orderItemElement);
                });
            }
        }

        function deleteOrderItem(index) {
            orderItems.splice(index, 1); // 从订单项数组中删除指定索引的订单项
            updateOrderDetails(); // 更新订单详情页面显示
        }

        function printOrderItem(index) {
            // 获取要打印的订单项信息
            var item = orderItems[index];
            // 打印订单项
            console.log("打印订单项：");
            console.log("商品名称：" + item.productName);
            console.log("数量：" + item.quantity);
            console.log("操作时间：" + item.timestamp);
            showPopup('已通知外卖员，即将为您配送'); // 显示弹窗
        }

        function showPopup(message) {
            var popupText = document.getElementById('popupText');
            popupText.textContent = message; // 设置弹窗内容
            var popup = document.getElementById('popup');
            popup.style.display = 'block';
            // 设置定时器，在一定时间后隐藏弹窗
            setTimeout(function() {
                popup.style.display = 'none';
            }, 2000); // 2000 毫秒（2秒）
        }
    </script>
</body>
</html>